<template>
  <div class="analysis-container">
    <h3>各月汇交数(近一年)</h3>
    <div ref="chartRef"
         :style="{ height: '300px', width: '500px' }"></div>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, ref, Ref, watchEffect } from 'vue';
import { useECharts } from '/@/hooks/web/useECharts';
import { basicProps } from './props';
import { useRootSetting } from '/@/hooks/setting/useRootSetting';

defineProps({
  ...basicProps,
});

const chartRef = ref<HTMLDivElement | null>(null);
const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);

const { getThemeColor } = useRootSetting();

const init = () => {
  const xData = ['2022-03', '2022-06', '2022-09', '2022-12'];
  const yData = [2, 0, 0, 0];
  setOptions({
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        lineStyle: {
          width: 1,
          color: getThemeColor.value,
        },
      },
    },
    xAxis: {
      type: 'category',
      data: xData,
      splitLine: {
        show: true,
        lineStyle: {
          width: 1,
          type: 'solid',
          color: 'rgba(226,226,226,0.5)',
        },
      },
      axisTick: {
        show: false,
      },
    },
    yAxis: {
      type: 'value',
      name: '受理数(件)',
      axisTick: {
        show: false,
      },
      splitArea: {
        show: true,
        areaStyle: {
          color: ['rgba(255,255,255,0.2)', 'rgba(226,226,226,0.2)'],
        },
      },
    },
    series: [
      {
        name: '受理数',
        data: yData,
        type: 'bar',
        itemStyle: {
          color: '#5ab1ef',
          borderRadius: [6, 6, 0, 0],
        },
        emphasis: {
          itemStyle: {
            color: '#2f89cf',
          },
        },
      },
    ],
  });
};

watchEffect(() => {
  init();
});
</script>

<style scoped>
.analysis-container {
  margin-bottom: 20px;
}
</style>